<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约日历和时间表组件演示</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- 自定义CSS -->
    <link href="css/calendar.css" rel="stylesheet">

    <style>
        body {
            background: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .demo-section {
            margin-bottom: 3rem;
        }

        .demo-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
            text-align: center;
        }

        .component-demo {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .demo-title {
            color: #2c3e50;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #e9ecef;
        }

        .usage-code {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1rem;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
        }

        .alert-info {
            background: linear-gradient(135deg, #e3f2fd, #bbdefb);
            border: none;
            color: #1565c0;
        }
    </style>
</head>
<body>
    <div class="demo-header">
        <div class="container">
            <h1><i class="fas fa-calendar-alt me-3"></i>预约日历和时间表组件</h1>
            <p class="lead mb-0">交互式日历选择和时间表管理组件演示</p>
        </div>
    </div>

    <div class="container-fluid">
        <!-- 日历组件演示 -->
        <div class="demo-section">
            <div class="component-demo">
                <h2 class="demo-title">
                    <i class="fas fa-calendar me-2"></i>日历组件 (ReservationCalendar)
                </h2>

                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>功能特性：</strong>
                    月视图和周视图切换 | 日期选择 | 时间段拖拽选择 | 实时球台可用情况 | 冲突检测
                </div>

                <div id="calendar-demo" style="height: 600px;"></div>

                <div class="usage-code">
                    <strong>使用方法：</strong><br>
                    <code>
const calendar = new ReservationCalendar('#calendar-demo', {<br>
&nbsp;&nbsp;tables: [<br>
&nbsp;&nbsp;&nbsp;&nbsp;{ id: 1, name: '1号台', status: 'available' },<br>
&nbsp;&nbsp;&nbsp;&nbsp;{ id: 2, name: '2号台', status: 'available' }<br>
&nbsp;&nbsp;],<br>
&nbsp;&nbsp;onDateSelect: (date) => console.log('选择日期:', date),<br>
&nbsp;&nbsp;onTimeSelect: (timeSlot) => console.log('选择时间:', timeSlot)<br>
});
                    </code>
                </div>
            </div>
        </div>

        <!-- 时间表组件演示 -->
        <div class="demo-section">
            <div class="component-demo">
                <h2 class="demo-title">
                    <i class="fas fa-clock me-2"></i>时间表组件 (ReservationSchedule)
                </h2>

                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>功能特性：</strong>
                    日视图和周视图 | 拖拽创建预约 | 调整预约时长 | 预约块移动 | 时间缩放 | 冲突检测
                </div>

                <div id="schedule-demo" style="height: 700px;"></div>

                <div class="usage-code">
                    <strong>使用方法：</strong><br>
                    <code>
const schedule = new ReservationSchedule('#schedule-demo', {<br>
&nbsp;&nbsp;viewType: 'day',<br>
&nbsp;&nbsp;tables: [{ id: 1, name: '1号台' }, { id: 2, name: '2号台' }],<br>
&nbsp;&nbsp;allowDrag: true,<br>
&nbsp;&nbsp;allowResize: true,<br>
&nbsp;&nbsp;onEventCreate: (eventData) => console.log('创建预约:', eventData),<br>
&nbsp;&nbsp;onEventUpdate: (id, data) => console.log('更新预约:', id, data)<br>
});
                    </code>
                </div>
            </div>
        </div>

        <!-- 组件集成演示 -->
        <div class="demo-section">
            <div class="component-demo">
                <h2 class="demo-title">
                    <i class="fas fa-puzzle-piece me-2"></i>组件集成演示
                </h2>

                <div class="row">
                    <div class="col-lg-6">
                        <h5>选择日期和时间</h5>
                        <div id="mini-calendar" style="height: 400px;"></div>
                    </div>
                    <div class="col-lg-6">
                        <h5>预约信息</h5>
                        <div class="card">
                            <div class="card-body">
                                <div id="selection-info">
                                    <p class="text-muted">请选择日期和时间段</p>
                                </div>

                                <div id="reservation-form" style="display: none;">
                                    <form>
                                        <div class="mb-3">
                                            <label class="form-label">学员姓名</label>
                                            <input type="text" class="form-control" placeholder="请输入学员姓名">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">教练</label>
                                            <select class="form-select">
                                                <option>请选择教练</option>
                                                <option>张教练</option>
                                                <option>李教练</option>
                                                <option>王教练</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">课程类型</label>
                                            <select class="form-select">
                                                <option>基础训练</option>
                                                <option>技术提升</option>
                                                <option>比赛指导</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">备注</label>
                                            <textarea class="form-control" rows="3" placeholder="请输入备注信息"></textarea>
                                        </div>
                                        <button type="button" class="btn btn-primary w-100" onclick="createReservation()">
                                            <i class="fas fa-plus me-2"></i>创建预约
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- API文档 -->
        <div class="demo-section">
            <div class="component-demo">
                <h2 class="demo-title">
                    <i class="fas fa-book me-2"></i>API 文档
                </h2>

                <div class="row">
                    <div class="col-lg-6">
                        <h5>ReservationCalendar 配置选项</h5>
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>参数</th>
                                    <th>类型</th>
                                    <th>默认值</th>
                                    <th>说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>startHour</td>
                                    <td>number</td>
                                    <td>8</td>
                                    <td>开始时间</td>
                                </tr>
                                <tr>
                                    <td>endHour</td>
                                    <td>number</td>
                                    <td>22</td>
                                    <td>结束时间</td>
                                </tr>
                                <tr>
                                    <td>slotDuration</td>
                                    <td>number</td>
                                    <td>30</td>
                                    <td>时间槽长度（分钟）</td>
                                </tr>
                                <tr>
                                    <td>tables</td>
                                    <td>Array</td>
                                    <td>[]</td>
                                    <td>球台列表</td>
                                </tr>
                                <tr>
                                    <td>onDateSelect</td>
                                    <td>Function</td>
                                    <td>null</td>
                                    <td>日期选择回调</td>
                                </tr>
                                <tr>
                                    <td>onTimeSelect</td>
                                    <td>Function</td>
                                    <td>null</td>
                                    <td>时间选择回调</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="col-lg-6">
                        <h5>ReservationSchedule 配置选项</h5>
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>参数</th>
                                    <th>类型</th>
                                    <th>默认值</th>
                                    <th>说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>allowDrag</td>
                                    <td>boolean</td>
                                    <td>true</td>
                                    <td>允许拖拽</td>
                                </tr>
                                <tr>
                                    <td>allowResize</td>
                                    <td>boolean</td>
                                    <td>true</td>
                                    <td>允许调整大小</td>
                                </tr>
                                <tr>
                                    <td>allowCreate</td>
                                    <td>boolean</td>
                                    <td>true</td>
                                    <td>允许创建事件</td>
                                </tr>
                                <tr>
                                    <td>conflictStrategy</td>
                                    <td>string</td>
                                    <td>'warn'</td>
                                    <td>冲突处理策略</td>
                                </tr>
                                <tr>
                                    <td>onEventCreate</td>
                                    <td>Function</td>
                                    <td>null</td>
                                    <td>事件创建回调</td>
                                </tr>
                                <tr>
                                    <td>onEventUpdate</td>
                                    <td>Function</td>
                                    <td>null</td>
                                    <td>事件更新回调</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 组件JS -->
    <script src="js/calendar.js"></script>
    <script src="js/schedule.js"></script>

    <script>
        // 示例数据
        const sampleTables = [
            { id: 1, name: '1号台', status: 'available' },
            { id: 2, name: '2号台', status: 'available' },
            { id: 3, name: '3号台', status: 'maintenance' }
        ];

        const sampleReservations = [
            {
                id: 1,
                table_id: 1,
                start_time: new Date(2024, 11, 20, 9, 0),
                end_time: new Date(2024, 11, 20, 10, 0),
                student_name: '张三',
                coach_name: '李教练',
                status: 'confirmed'
            },
            {
                id: 2,
                table_id: 2,
                start_time: new Date(2024, 11, 20, 14, 0),
                end_time: new Date(2024, 11, 20, 15, 30),
                student_name: '李四',
                coach_name: '王教练',
                status: 'pending'
            }
        ];

        // 初始化日历组件
        const calendar = new ReservationCalendar('#calendar-demo', {
            tables: sampleTables,
            reservations: sampleReservations,
            onDateSelect: function(date) {
                console.log('选择日期:', date);
                showAlert('info', `选择了日期：${date.toLocaleDateString()}`);
            },
            onTimeSelect: function(timeSlot) {
                console.log('选择时间段:', timeSlot);
                showAlert('success', '时间段选择成功！');
            }
        });

        // 初始化时间表组件
        const schedule = new ReservationSchedule('#schedule-demo', {
            tables: sampleTables,
            reservations: sampleReservations,
            allowDrag: true,
            allowResize: true,
            allowCreate: true,
            onEventCreate: function(eventData) {
                console.log('创建预约:', eventData);
                showAlert('success', '预约创建成功！');
            },
            onEventUpdate: function(eventId, updateData) {
                console.log('更新预约:', eventId, updateData);
                showAlert('info', '预约更新成功！');
            },
            onEventDelete: function(eventId) {
                console.log('删除预约:', eventId);
                showAlert('warning', '预约已删除');
            },
            onEventClick: function(reservation) {
                console.log('点击预约:', reservation);
                showReservationDetails(reservation);
            }
        });

        // 初始化集成演示
        const miniCalendar = new ReservationCalendar('#mini-calendar', {
            tables: sampleTables.slice(0, 2),
            onDateSelect: function(date) {
                updateSelectionInfo('date', date);
            },
            onTimeSelect: function(timeSlot) {
                updateSelectionInfo('time', timeSlot);
                document.getElementById('reservation-form').style.display = 'block';
            }
        });

        let selectedDate = null;
        let selectedTimeSlot = null;

        function updateSelectionInfo(type, data) {
            if (type === 'date') {
                selectedDate = data;
            } else if (type === 'time') {
                selectedTimeSlot = data;
            }

            if (selectedDate && selectedTimeSlot) {
                const table = sampleTables.find(t => t.id === selectedTimeSlot.tableId);
                const info = `
                    <div class="alert alert-success">
                        <h6><i class="fas fa-check-circle me-2"></i>已选择时间段</h6>
                        <p><strong>日期：</strong>${selectedDate.toLocaleDateString()}</p>
                        <p><strong>时间：</strong>${selectedTimeSlot.datetime.toLocaleTimeString()} (${selectedTimeSlot.duration || 60}分钟)</p>
                        <p><strong>球台：</strong>${table ? table.name : '未知'}</p>
                    </div>
                `;
                document.getElementById('selection-info').innerHTML = info;
            }
        }

        function createReservation() {
            showAlert('success', '预约创建成功！（演示）');
            document.getElementById('reservation-form').style.display = 'none';
        }

        function showReservationDetails(reservation) {
            const details = `
                <div class="alert alert-info">
                    <h6>预约详情</h6>
                    <p><strong>学员：</strong>${reservation.student_name}</p>
                    <p><strong>教练：</strong>${reservation.coach_name}</p>
                    <p><strong>时间：</strong>${reservation.start_time.toLocaleString()} - ${reservation.end_time.toLocaleString()}</p>
                    <p><strong>状态：</strong>${reservation.status}</p>
                </div>
            `;

            // 创建模态框显示详情
            const modal = document.createElement('div');
            modal.className = 'modal fade';
            modal.innerHTML = `
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">预约详情</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">${details}</div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            `;

            document.body.appendChild(modal);
            new bootstrap.Modal(modal).show();

            modal.addEventListener('hidden.bs.modal', () => {
                document.body.removeChild(modal);
            });
        }

        function showAlert(type, message) {
            const alertClass = type === 'success' ? 'alert-success' :
                              type === 'info' ? 'alert-info' :
                              type === 'warning' ? 'alert-warning' : 'alert-danger';

            const alert = document.createElement('div');
            alert.className = `alert ${alertClass} alert-dismissible fade show position-fixed`;
            alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            alert.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;

            document.body.appendChild(alert);

            setTimeout(() => {
                if (alert.parentNode) {
                    alert.parentNode.removeChild(alert);
                }
            }, 3000);
        }

        // 全局函数，用于在控制台测试
        window.calendarDemo = calendar;
        window.scheduleDemo = schedule;
        window.miniCalendarDemo = miniCalendar;

        console.log('组件演示页面已加载');
        console.log('可用的全局对象：calendarDemo, scheduleDemo, miniCalendarDemo');
    </script>
</body>
</html>